<template>
  <div class="shopindex an-home-page">

    <head-input></head-input>

    <tab>
      <tab-item
        :selected="index==0"
        v-for="(item,index) in productClassify"
        :key="item.id"
        @on-item-click="onItemClick(item.id)">
        {{item.name}}
      </tab-item>
    </tab>

    <div class="list-box">
      <flexbox :gutter="0" wrap="wrap" style="height: 100%">
        <flexbox-item :span="3" style="height: 100%">
          <div class="an-list-left">
            <ul>
              <li :class="IsAcitve(item.secondId)" v-for="(item,index) in secendClassify" :key="item.secondId" @click="OnClickSecend(item.secondId)">{{item.name}}</li>
            </ul>
          </div>
        </flexbox-item>
        <flexbox-item :span="9" style="height: 100%">
          <div >
            <img-txt-left :secendId="CheckSecend"></img-txt-left>
          </div>
        </flexbox-item>
      </flexbox>

    </div>


  </div>
</template>

<script>
  import {XHeader,Flexbox,FlexboxItem,Tab, TabItem , } from 'vux'
  import {getClassification} from '@/api/data'
  import headInput from '@/components/headInput'
  import ImgTxtLeft from './components/ImgTxtLeft'

    export default {
      name: "shop-index",
      components: {
        headInput,
        XHeader,
        ImgTxtLeft,
        Flexbox,
        FlexboxItem,
        Tab,
        TabItem,
      },
      data(){
        return{
          productClassify:[], //产品分类   总
          secendClassify:[], //二级分类
          CheckSecend:'', //当前选中的二级菜单
          productList:[], //产品列表
        }
      },
      mounted(){
        this.getList();
      },
      methods:{
        getList(){
          getClassification().then(res=>{
            let arry = res.result.data;
            this.productClassify = arry;
            this.secendClassify = arry[0].children;
            this.CheckSecend = arry[0].children[0].secondId;
            //console.log(arry);
          })
        },
        onItemClick(id){  //主类别切换
          let nd = this.productClassify;
          let nw = [];
          nd.forEach((item,index)=>{
            if(item.id == id){
              nw = item.children
            }
          });
          this.secendClassify = nw;
          this.CheckSecend = nw[0].secondId;
        },
        OnClickSecend(id){  //二级类别切换
          this.CheckSecend = id;
        },
        IsAcitve(id){
          let nd = '';
          if(id === this.CheckSecend){
            nd = 'active';
          }
          return nd;
        },
        OnSeach(){
          this.$router.push({path:'/shopSelect'})
        }
      }
    }
</script>

<style lang="less">
  @import "../../styles/anstyle";
  .shopindex{
    height: 100%;
    .car-boder{
      margin: 1px;
      border: 1px solid @color-border3;
    }
    .list-box{
      position: absolute;
      left: 0;
      right: 0;
      top:90px;
      bottom:50px;
      .an-list-left{
        height: 100%;
        text-align: center;
        border-right: 1px solid @color-border3;
        background-color: #FFFFFF;
        ul{
          li{
            padding: 5px 0;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            &.active{
              color: @color-org;
            }
          }
        }
      }
    }

  }

</style>
